<template>
  <div class="person">
    <h2>中国</h2>
    <!-- ref加在html标签上，拿到的是DOM元素 -->
    <h2 ref="title2">北京</h2>
    <h2>华科</h2>
    <button @click="showLog">输出第二个元素</button>
  </div> 
</template>

<script lang="ts" setup name="Person">
  import { ref,defineExpose} from 'vue'

  // 创建一个title2，用于存储ref标记的内容,ref标记的内容相当于局部变量，文件之间即使有相同的title2容器互不影响
  let title2 = ref()
  // 数据
  let a = ref(0)
  let b = ref(1)
  let c = ref(2)
  // 方法
  function showLog(){
    console.log(title2.value);
  }
  // 计算属性
  
  // 监视
  
  // 向父组件传递的参数
  defineExpose({a,b})  
 
</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button{
    margin: 0 5px;
  }
  ul li{
    font-size: 20px;
  }
</style>